<template>
    <!-- 人员管理下的员工管理 -->
    <div class="container">

      <el-form :inline="true" :model="formInline" style="margin: 0;">
        <el-form-item label="">
          <el-input v-model="formInline.username" placeholder="用户名(支持模糊查询)"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="formInline.phone" placeholder="联系电话"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="formInline.sex" placeholder="性别"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="formInline.age" placeholder="年龄"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSelect">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button  @click="onRest">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="success"  @click="addEmployee" style="margin-left: 260px;">新增员工</el-button>
        </el-form-item>
      </el-form>

      <el-divider style="margin: 0; padding: 0;"></el-divider>

      <div style="height: 660px; padding: 20px; border: none;">
        
        <!-- 展示的员工卡片信息 -->
        <table cellspacing="5px">
            <tr v-for="(employee,index) in apperEmployeeList" :key="index">
                <td v-for="item in employee" :key="item.id">
                    <InfoCard 
                        :employee="item" 
                        >
                    </InfoCard>
                </td>
            </tr>
        </table>
    
      </div>

        <!-- 分页 -->
        <el-pagination
            @current-change="handleCurrentChange"
            :page-size="12"
            layout="total, prev, pager, next, jumper"
            :total="employeeList.length"
            >
        </el-pagination>

        <!-- 员工详情对话框 -->
        <EmployeeDialogBox/>

        <!-- 员工下属的老人对话框 -->
        <EmployeeManageOlder/>

        <!-- 员工新增对话框 -->
        <EmployeeManageAdd/>
    </div>
</template>

<script>
import myAxios from '@/tools/myAxios';
import Qs from 'qs';
// 员工详情对话框
import EmployeeDialogBox from './EmployeeDialogBox';
// 管理老人对话框
import EmployeeManageOlder from './EmployeeManageOlder';
// 员工信息卡片
import InfoCard from './InfoCard'
import EmployeeManageAdd from './EmployeeManageAdd';
export default {
    name:'EmployeeManage',
    components:{
        InfoCard,
        EmployeeDialogBox,
        EmployeeManageOlder,
        EmployeeManageAdd
    },
    data() {
        return {
            // 查询的数据
            formInline:{
              username: '',
              phone: '',
              sex:'',
              age:'',
            },
            // 存放所有的员工的数据的集合
            employeeList:[],
            // 用来展示的数据集合
            apperEmployeeList:[],
        }
    },
    created(){
        // 从后端拿到所有的员工信息
        myAxios(
            'http://localhost:8088/admin/getallemployee',
            'get',
            null,
            (data)=>{
                if(data.length === 0){
                    this.$message({
                        message: '该管理员没有下属员工!',
                        type: 'warning'
                    });
                }else{
                    this.employeeList = data;
                    // 初始化数据
                    this.apperEmployeeList.push(this.employeeList.slice(0,4))
                    this.apperEmployeeList.push(this.employeeList.slice(4,8))
                    this.apperEmployeeList.push(this.employeeList.slice(8,12))
                }
            }
        )
    },
    methods:{
        // 新增员工
        addEmployee(){
            this.$bus.$emit('addEmployeeOnEmployeeManage',true)
        },
        // 重置按钮
        onRest(){
            window.location.reload();
        },
        // 查询按钮(当前管理员手下的员工，可以根据用户名来模糊查询)
        onSelect() {
            if(this.formInline.username === '' && this.formInline.phone === '' && this.formInline.sex === '' && this.formInline.age === ''){
                this.$notify({
                  title: '警告',
                  message: '请输入条件后再来查询!',
                  type: 'warning'
                });
                return ;
            }
            myAxios(
                'http://localhost:8088/employee/getallemployeebylike',
                'post',
                Qs.stringify(this.formInline),
                (data)=>{
                    if(data.length != 0){
                        this.employeeList = data;
                        // 初始化数据
                        this.apperEmployeeList = [];
                        this.apperEmployeeList.push(this.employeeList.slice(0,4))
                        this.apperEmployeeList.push(this.employeeList.slice(4,8))
                        this.apperEmployeeList.push(this.employeeList.slice(8,12))
                    }else{
                        // 提示一下
                        this.$message({
                            message: '查询结果为空!',
                            type: 'warning'
                        });
                        this.formInline.username = '';
                        this.formInline.phone = '';
                        this.formInline.sex = '';
                        this.formInline.age = '';
                    }
                }
            );
        },
        // 分页的点击事件， val当前的页数
        handleCurrentChange(val) {
            const n = (val-1)*12;
            this.apperEmployeeList = [];
            this.apperEmployeeList.push(this.employeeList.slice(n,n+4))
            this.apperEmployeeList.push(this.employeeList.slice(n+4,n+8))
            this.apperEmployeeList.push(this.employeeList.slice(n+8,val*12))
        }
    },
}
</script>

<style scoped lang="less">
.container{
    .fy-container{
        height: 50px;
        background-color: aqua;
    }
    .el-divider--horizontal {
        margin-top: 0;
        margin-bottom: 5px;
    }
}
</style>